@import "index.less";
.Top_position {
  .mainsVw {
    background: url(../images/contactUs01.png) no-repeat center center / cover;
  }
}
.two_navigation {
  margin-bottom: 0;
}
#contactUs {
  background: #f9f9f9;
  padding-top: 30px;
  .container {
    @flex_w_s_b();
    // display: flex;
    .con {
      width: 40%;
      padding-top: 40px;
      h3 {
        text-align: left;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 10px;
        // color: @color;
      }
      .line {
        width: 100%;
        height: 1px;
        background: #d9d9d9;
        margin: 20px 0;
      }
      .call {
        padding-bottom: 11px;
        .call_item {
          margin-bottom: 20px;
          font-size: 16px;
          p {
            display: flex;
            color: #898989;
            line-height: 24px;

            span {
              min-width: 48px;
              display: block;
              color: #000;
            }
          }
        }
      }
      .havingBtn {
        .int {
          width: 150px;
          height: 46px;
          @flex_c_c();
          color: @btnColor;
          border: 2px solid @btnColor;
          .icon {
            width: 16px;
            margin-right: 10px;
            &.hide {
              display: none;
            }
          }
          &.active,
          &:hover {
            cursor: pointer;
            background: @btnColor;
            color: #fff;
            .icon {
              display: none;
              &.hide {
                display: block;
              }
            }
          }
        }
      }
    }
    #map {
      width: 55%;
      height: 370px;
      border-left: 3px solid @color;
      border-bottom: 3px solid @color;
    }
  }

  .contactUs_wall {
    border-top: 1px solid #eaeaea;
    padding-top: 48px;
    margin-top: 30px;
    .message {
      width: 1200px;
      margin: 0 auto;
      .title {
        h3 {
          font-size: 30px;
          font-weight: bold;
          color: #414141;
        }
        .form {
          @flex_w_s_b();
          padding-bottom: 55px;
          input {
            display: block;
            margin-top: 38px;
            padding: 0 26px;
            width: 340px;
            height: 54px;
            line-height: 54px;
            box-sizing: border-box;
            // color: #999;
            border-radius: 0;
            border: 0;
            background-color: #f9f9f9;
            border: 1px solid #898989;
          }
          textarea {
            display: block;
            margin-top: 23px;
            padding: 20px 20px 16px;
            width: 100%;
            font-size: 14px;
            // color: #999;
            resize: none;
            border: 0;
            border-radius: 0;
            background-color: #f9f9f9;
            border: 1px solid #898989;
          }
          button {
            margin-top: 25px;
            width: 340px;
            height: 54px;
            color: #fff;
            border: 0;
            outline: none;
            cursor: pointer;
            font-size: 16px;
            background-color: @color;
          }
        }
      }
    }
  }
  #mapHide {
    width: 90%;
    display: none;
    margin: 20px auto;
  }
}

@media (max-width: 1370px) {
  #contactUs {
    .container {
      .con {
        width: 100%;
        margin-bottom: 15px;
      }
      #map {
        width: 100%;
        height: 420px;
      }
    }
    .contactUs_wall {
      .message {
        width: 90%;
        .title {
          .form {
            padding-bottom: 25px;
            input {
              display: block;
              margin-top: 38px;
              padding: 0 26px;
              width: 340px;
              height: 54px;
              line-height: 54px;
              box-sizing: border-box;
              color: #999;
              border-radius: 0;
              border: 0;
              background-color: #f3f3f3;
              // border: 1px solid #cdcdcd;
            }
            textarea {
              display: block;
              margin-top: 23px;
              padding: 20px 20px 16px;
              width: 100%;
              font-size: 14px;
              color: #999;
              resize: none;
              border: 0;
              border-radius: 0;
              background-color: #f3f3f3;
              // border: 1px solid #cdcdcd;
            }
            button {
              margin-top: 25px;
              width: 340px;
              height: 54px;
              color: #fff;
              border: 0;
              outline: none;
              cursor: pointer;
              font-size: 16px;
              background-color: @color;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 767px) {
  #contactUs {
    .container {
      .con {
        padding-top: 0;
        .call {
          .call_item {
            width: 100%;
          }
        }
      }
      #map {
        display: none;
        height: 300px !important;
      }
    }

    .contactUs_wall {
      padding-top: 20px;
      margin-top: 15px;
      .message {
        .title {
          .form {
            input {
              width: 100%;
            }
          }
        }
      }
    }
    #mapHide {
      display: block;
      height: 300px !important;
    }
  }
}
